<template>
  <div>
    <div class="search">
      <van-sticky>
        <div class="top">
          <span
            class="back iconfont icon-fanhui-xianxing"
            @click="$router.go(-1)"
          ></span>
          <div class="ipt">
            <input
              type="text"
              name="sea"
              id="sea"
              placeholder="搜索歌曲、歌手"
              @focus="seaicon = true"
              v-model="iptText"
            />
          </div>
          <span
            class="clearbtn iconfont icon-icon-7"
            v-show="seaicon"
            @click="sendsea"
          ></span>
        </div>
      </van-sticky>
      <div class="historyB" v-show="!resultShow">
        <div class="hot">
          <h5>热门搜索</h5>
          <ul>
            <li v-for="(item, index) in hotlist" :key="index" @click="clisend">
              {{ item.first }}
            </li>
          </ul>
        </div>
        <div class="history">
          <h5>
            搜索历史
            <span
              class="iconfont icon-shanchu"
              v-if="sHistory.length != 0"
              @click="clearHistoryFn"
            ></span>
          </h5>
          <ul>
            <li v-for="(item, index) in sHistory" :key="index" @click="clisend">
              {{ item }}
              <span class="iconfont icon-close" @click="delH(index)"></span>
            </li>
          </ul>
        </div>
      </div>
      <div class="result" v-if="resultShow">
        <div class="best" v-if="result.songs">
          <h5>最佳匹配</h5>
          <ul>
            <li
              @click="
                gotoplay(
                  result.songs[0].id,
                  result.songs[0].name,
                  result.songs[0].al.picUrl,
                  result.songs[0].ar
                )
              "
              @click.once="pushlist"
            >
              <div class="imgs">
                <img :src="result.songs[0].al.picUrl" alt="" />
              </div>
              <div class="text">
                {{
                  result.songs[0].ar[0].name | authorFn(result.songs[0].ar)
                }}:{{ result.songs[0].name }}
              </div>
            </li>
          </ul>
        </div>
        <ul>
          <li
            v-for="(item, index) in result.songs"
            :key="index"
            @click="gotoplay(item.id, item.name, item.al.picUrl, item.ar)"
            @click.once="pushlist"
          >
            <p>{{ item.name }}</p>
            <p>{{ item.ar[0].name | authorFn(item.ar) }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { gethotsea, getsea } from "../api/base/search.js";
export default {
  data() {
    return {
      seaicon: false, //搜搜图标
      iptText: "", // 搜索框文本
      hotlist: null, // 热门搜索列表
      // sHistory: [], // 搜索历史
      resultShow: false, // 显示搜索结果界面
      result: { songs: null }, // 搜索结果
    };
  },
  methods: {
    sendsea() {
      if (this.iptText == "") {
        this.resultShow = false;
        return;
      } else {
        // 搜索历史保存
        // if (this.sHistory.length < 10) {
        //   this.sHistory.push(this.iptText);
        // } else {
        //   this.sHistory.shift();
        //   this.sHistory.push(this.iptText);
        // }
        this.$store.commit("seaHistoryFn", this.iptText);
      }

      // 控制界面显示
      this.seaicon = false;
      this.resultShow = true;

      // 发送请求 单曲
      getsea({ keywords: this.iptText, limit: 10 }).then((data) => {
        if (data.code == 200) {
          // this.$set(this.result,songs,data.result.songs)
          this.result.songs = data.result.songs;
        }
        console.log(this.result);
      });
      this.iptText = "";
    },
    delH(index) {
      // 删除搜索历史记录
      this.sHistory.splice(index, 1);
    },
    clisend() {
      // 点击热门搜索 搜索历史搜索 结果
      this.iptText = event.target.innerText;
      this.sendsea();
    },
    gotoplay(...data) {
      let playData = {
        id: data[0],
        name: data[1],
        pic: data[2],
        author: data[3],
      };
      this.$store.commit("curListFn", playData);
      this.$store.commit("playflagFn", true);
    },
    pushlist() {
      let list = [];
      this.result.songs.forEach((item) => {
        list.push({
          id: item.id,
          name: item.name,
          pic: item.al.picUrl,
          author: item.ar,
        });
      });

      this.$store.commit("allListFn", list);
    },
    clearHistoryFn() {
      this.$store.commit("clearHistoryFn");
    },
  },
  created() {
    gethotsea().then((data) => {
      if (data.code == 200) {
        this.hotlist = data.result.hots;
        // console.log(this.hotlist);
      }
    });
  },
  filters: {
    authorFn(old, newd) {
      let str = "";
      newd.forEach((item) => {
        str = str + item.name + " / ";
      });
      str = str.substr(0, str.length - 2);
      return str;
    },
  },
  computed: {
    sHistory() {
      return this.$store.state.seaHistory;
    },
  },
};
</script>

<style lang="less">
.search {
  width: 100vw;
  height: 100vh;
  position: relative;
  padding-top: 46px;
  background-color: #f2f3f4;
  box-sizing: border-box;
  .top {
    width: 100%;
    position: absolute;
    top: 0;
    // background-color: #d44439;
    // background: linear-gradient(to top, #d3959b, #bfe6ba);
    background-color: skyblue;
    height: 46px;
    .back {
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
      width: 10vw;
      height: 100%;
      line-height: 46px;
      font-weight: bolder;
      color: white;
      font-size: 5vw;
    }
    .clearbtn {
      position: absolute;
      top: 0;
      right: 0;
      text-align: center;
      width: 10vw;
      height: 100%;
      line-height: 46px;
      font-weight: bolder;
      color: white;
      font-size: 5vw;
    }
    .ipt {
      width: 75vw;
      height: 100%;
      margin: 0 auto;
      line-height: 26px;
      padding: 3px 0;
      input {
        width: 100%;
        height: 50%;
        border: none;
        outline: none;
        padding: 1px 0;

        background-color: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        font-size: 5vw;
        color: white;
        &::-webkit-input-placeholder {
          color: rgba(255, 255, 255, 0.5);
          font-size: 4vw;
        }
        // vertical-align: top;
      }
    }
  }
  .historyB {
    padding: 10px 20px;
    .hot {
      width: 100%;
      // height: 15vh;
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          font-size: 4vw;
          padding: 5px;
          border: 1px solid #ccc;
          border-radius: 1vw;
          margin: 0 10px 10px 0;
        }
      }
    }
    .history {
      h5 {
        span {
          float: right;
        }
        margin-bottom: 5px;
      }
      ul {
        li {
          font-size: 4vw;
          margin: 0 0 10px 0;
          color: rgba(20, 19, 19, 0.87);
          height: 30px;
          line-height: 30px;
          span {
            float: right;
            font-weight: bolder;
            font-size: 4vw;
          }
        }
      }
    }
    h5 {
      height: 36px;
      line-height: 36px;
      font-size: 4vw;
      color: rgba(56, 43, 43, 0.562);
    }
  }
  .result {
    padding: 10px 20px;
    background-color: #f2f3f4;
    .best {
      h5 {
        height: 36px;
        line-height: 36px;
        font-size: 4vw;
        color: rgba(224, 17, 17, 0.815);
      }
      li {
        display: flex;
        .imgs {
          width: 15vw;
          height: 15vw;
          img {
            width: 100%;
          }
        }
        .text {
          height: 15vw;
          line-height: 15vw;
          text-indent: 1em;
          font-size: 5vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    & > ul {
      li {
        font-size: 5vw;
        height: 12vw;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-bottom: 5px;
          &:nth-child(2) {
            font-size: 4vw;
            color: #999;
          }
        }
      }
    }
    li {
      border-bottom: 2px solid #e2e2e2;
      padding: 10px 0;
    }
  }
}
</style>